<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
#parse("/linkandscript.html")
<title>图片视图 $targetcategoryimgsize</title>
</head>
<body>
    #parse("/picwallheader.html")
    
    <div id="container"> 
    #set($i = 0)
    #foreach($image in $images)
    #set($i = $i+1)
      <div class="imagegroup" id="div-$image.getImageid()" style="width:${image.getWidth()}px; height:${image.getHeight()}px"> 
        <a href="$image.getFullWebpath()" target="_blank"> 
            <img class="feature" id="$image.getImageid()" src="$image.getFullWebpath()" width="$image.getWidth()"/> 
        </a>
        <div class="tagdiv">
            <span>$!image.getTags()</span>
        </div>
        <div class="operationdiv" id="opdiv-$image.getImageid()"> 
            <table width="100%">
                <tr style="background-color:#FFF; opacity: 0.9;">
                    <td colspan="5" style="padding:10px">
                        ID:$image.getImageid() @ $image.getForumid()<br/>
                      $i / $targetcategoryimgsize  $!image.getPosttitle()  <br/>
                      本图片在帖子中的位置是: [$!image.getEffectiveimgindex() / $!image.getEffectiveimgnum()]  <br/>
                      图片打分为：$!image.getScore() 打分记录是：$!image.getTags()] $!image.getScoretrace()
                    </td>
                </tr>
                <tr>
                    <td>
                        <a id="yibanbtn$image.getImageid()" class="btn btn-large btn-block btn-info markoperation" 
                            imageid="$image.getImageid()" postid="$image.getPostid()" forum="$image.getForumid()" 
                            imageurl="$image.getImageurl()" posturl="$image.getPosturl()">标记为喜欢</a>
                    </td>
                    <td>
                        <a id="yibanbtn$image.getImageid()" class="btn btn-large btn-block btn-info markoperation" 
                        imageid="$image.getImageid()" postid="$image.getPostid()" forum="$image.getForumid()" 
                        imageurl="$image.getImageurl()" posturl="$image.getPosturl()">标记为最爱</a>
                    </td>
                    <td>
                        <a id="yibanbtn$image.getImageid()" class="btn btn-large btn-block btn-info markoperation" 
                        imageid="$image.getImageid()" postid="$image.getPostid()" forum="$image.getForumid()" 
                        imageurl="$image.getImageurl()" posturl="$image.getPosturl()">另存图片</a>
                    </td>
                    <td style="display:none">
                        <a id="yibanbtn$image.getImageid()" class="btn btn-large btn-block btn-info markoperation" 
                        imageid="$image.getImageid()" postid="$image.getPostid()" forum="$image.getForumid()" 
                        imageurl="$image.getImageurl()" posturl="$image.getPosturl()">稍后处理</a>
                    </td>
                    <td>
                        <a class="btn btn-large btn-block btn-info markoperation" href="$image.getPosturl()" target="_blank">查看原帖</a>
                    </td>
                    <td>
                        <a id="yibanbtn$image.getImageid()" class="btn btn-large btn-block btn-info markoperation yidu" 
                        id="yidu-$image.getImageid()" imageid="$image.getImageid()" postid="$image.getPostid()" 
                        forum="$image.getForumid()" imageurl="$image.getImageurl()" posturl="$image.getPosturl()">标记为已读</a>
                    </td>
                </tr>
            </table>
        </div><!--operationdiv-->
      </div><!--imagegroup-->
    #end 
    </div><!--container-->
    
    <div style="clear:none"></div>
    
    <div class="center" style="text-align:center; margin-top:50px; margin-bottom:100px; z-index:1000">
       <a id="batchyidubtn" class="btn btn-large btn-info batchyidu">将以上图片设为已读</a>
    </div>

</body>


<script language="javascript">
globalqueueid="picwall"
allforumnewimagecount = $allforumnewimagecount

$(function(){
	
	callOnload();
	doimagehover();
	domarkoperation();
	dobatchyidu();
	mason();
})

function callOnload(){
	var jsonobj = {};
	jsonobj.allforumnewimagecount = allforumnewimagecount;
	jsonobj.context = "图片总数:"+allforumnewimagecount;
	onload(jsonobj);
}



function doimagehover(){
    $(".imagegroup").hover(
		function(){
			id = $(this).attr("id");
            $("#op"+id).show();
			
			var height = $(this).css("height").replace("px","");
			//console.log(height);
			if(height > 900){
			   $("#op"+id).clone(true,true)
				.appendTo($(this))
				.attr("id","op2"+id)
				.removeClass("operationdiv")
				.addClass("operationdiv2");
			}
			

        },
		function(){
            $("#op"+id).hide();
			$("#op2"+id).remove();
        }
    );	
  
}

function domarkoperation(){
  	$(".markoperation").live('click', function(){

		//call onclick
		var jsonobj = {};
		jsonobj.imageurl = $(this).attr("imageurl")
		jsonobj.posturl = $(this).attr("posturl")
		jsonobj.context = "image" + $(this).attr("imageurl") + " post " + $(this).attr("posturl")
		onclick($(this),jsonobj);
		
		//json get
		tieziurl = $(this).attr("tieziurl");
		imageid = $(this).attr("imageid");
		postid = $(this).attr("postid");
		marktype = $(this).html();
		forum = $(this).attr("forum");
		
		if(marktype == '稍后处理'){
		}
		else{
		    $.get("/hezi/imageoperation?action=markimage&imageid=" + imageid + "&postid=" + postid + "&marktype=" + marktype,function(data){
			notice(data); 
			});
		}

		$(this).remove();
		$("#yidu-"+imageid).remove();
    });	
	
}
function dobatchyidu(){
	
	$(".batchyidu").live('click', function(){
		console.log("【批量标记已读操作】")
		imageids = "";
		var count=0
		$("a.yidu").each(function(){
			imageids = imageids + $(this).attr("imageid")+";";
			count++;
		  });
		  
		//ub  
		var jsonobj = {};
		jsonobj.context = "标记"+count+"图片已读";
		onclick($(this),jsonobj);
			
			
 		marktype = "已读";
		console.log(marktype + ":" + imageids);
		$.post("/hezi/imageoperation",
		  {
		  	action: "markimage",
			imageid: imageids,
			marktype: marktype},
			
		  function(data){
			console.log("批量操作收到返回:"+data);
			notice(data); 
			
			
			
			console.log("执行完毕");
			window.location.href="/hezi/picwall";	
			console.log("完成自动跳转");
			
		});
		
		waitingmessage(globalqueueid);
		$(this).remove();
    });
	
}



function mason(){
  $('#container').masonry({
    // options
    imageSelector : '.imagegroup',
	isFitWidth: true,
    columnWidth : $imagewidth
	//isFitWidth: true
  });
}

</script>
<style>
#container {
	margin: 0 auto;
	margin-top:6px;
}

.imagegroup {
	float: left;
}

.markoperation{
	opacity: 0.9;
}

.operationdiv{
	width:100%;
	//height:60px;
	
	display:none;
	position: absolute;
	top:0px;
	left:0px;
	
}

.operationdiv2{
	width:100%;
	display:none;
	position: absolute;
	bottom:0px;
	left:0px;
	
}

.tagdiv{
	position: absolute;
	height:30px;
	width:100px;
	top:4px;
	right:8px;
	text-align:right;
	font-size:20px;
	font:bold;
	color:#000;
}

.tagdiv span{
	background:#FFF;
}
</style>
</html>
